// --------------------------------------定义上边 top窗体----------------------------
var north = new Ext.Panel({
	html : '业务基础平台',
	// title : 'north',
	region : 'north',
	split : true,
	border : true,
	// collapsible : true,
	height : 80,
	// minSize : 100,
	// maxSize : 120,
	bbar : [{
				iconCls : 'icon-user',
				text : '欢迎' + userName
			}, '-', {
				text : Ext.Date.format(new Date(), 'Y年m月d日')
			}, '->', {
				text : '退出',
				iconCls : 'icon-logout',
				 handler:function(){  
					 window.history.back(-1);    
                    } 
			}],
	bodyStyle : 'backgroud-color:#99bbe8;line-height : 50px;padding-left:20px;font-size:22px;color:#000000;font-family:黑体;font-weight:bolder;'
			+ 'background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(153,187, 232, 0.4) ), color-stop(50%, rgba(153, 187, 232, 1) ),color-stop(0%, rgba(153, 187, 232, 0.4) ) )'
});

// --------------------------------------定义右边 east窗体----------------------------
var east = new Ext.Panel({
			title : 'east',
			region : 'east',
			split : true,
			border : true,
			collapsible : true,
			width : 100,
			minSize : 100,
			maxSize : 120
		});

// --------------------------------------定义下边south窗体----------------------------

var south = new Ext.Panel({
			title : 'south',
			region : 'south',
			split : false,
			border : true,
			height : 80,
			collapsible : true
		});
// --------------------------------------定义中间窗体----------------------------
var center = new Ext.tab.Panel({
	title : 'center',
	region : 'center',
	defaults : {
		autoScroll : true
	},
	// 渲染出所有的tab
	deferredRender : false,
	split : false,
	border : false,
	collapsible : true,
	html : '<iframe id="target" style="width:100%;height:100%;border:none;"></iframe>'
});

// --------------------------------------定义左边 west
// 窗体----------------------------
var ajax = function(config) { // 封装、简化AJAX
	Ext.Ajax.request({
				url : config.url, // 请求地址
				params : config.params, // 请求参数
				method : 'post', // 方法
				callback : function(options, success, response) {
					config.callback(Ext.JSON.decode(response.responseText));
					// 调用回调函数
				}
			});
	return false;
};

var tree = Ext.create("Ext.panel.Panel", {
			region : 'west',
			title : "系统菜单",
			width : 250,
			iconCls : "icon-tree",
			autoScroll : false,
			layout : 'accordion',
			collapsible : true,
			expanded : true,
			layoutConfig : {
				animate : true
			},
			split : true
		});

Ext.onReady(function() {
	
	
	
			// 定义树形组件
			// Ext.Msg.alert('提示信息', '学习EXTJS');

			var vp = new Ext.Viewport({
						layout : "border",
						items : [north, east, center, tree, south],
						listeners : {
							afterrender : function() {
								Ext.getBody().mask('正在加载系统菜单....');
								ajax({
											url : "column/columnlist.do",// 获取面板的地址
											params : {
												parentID : 0
											},
											callback : addTree
										});
							}
						}
					});

		});
function addTree(data) {
	Ext.getBody().unmask();
	// data = eval(data.columnlist);
	for (var i = 0; i < data.length; i++) {
		// alert(data[i].text),
		tree.add(Ext.create("Ext.tree.Panel", {
			id : data[i].channelid,
			title : data[i].text,
			iconCls : data[i].iconCls,
			useArrows : true,
			autoScroll : true,
			rootVisible : false,
			expanded : true,
			viewConfig : {
				loadingText : "正在加载..."
			},
			// store : createStore,
			store : createStore(data[i].channelid),
			listeners : {
				'beforeload' : function(store, op, node) {
					var params = {
						// parentID : node.raw.channelid
						// 父节点id
						// store.load({
						// params : {
						// parentID : id
						//
						// }
						// });
					};
					Ext.apply(store.proxy.extraParams, params);
				},
				// createStore.loader

				itemclick : function(view, node) {
					if (node.isLeaf()) {
						var id = node.raw.channelid;
						if (Ext.getCmp(id)) {
							center.setActiveTab(id);

						} else {
							if (node.raw.type === 'URL') {
								var panel = Ext.create('Ext.panel.Panel', {
									id : node.raw.channelid,
									title : node.raw.text,
									closable : true,
									iconCls : 'icon-activity',
									html : '<iframe width="100%" height="100%" frameborder="0" src="'
											+ node.raw.columnurl
											+ '"></iframe>'
										// https://www.baidu.com
								});
								center.add(panel);
								center.setActiveTab(panel);
							} else if (node.raw.type === 'COMPONENT') {
								var panel = Ext.create(node.raw.component, {
											id : node.raw.channelid,
											title : node.raw.text,
											closable : true,
											iconCls : 'icon-activity'
										});
								center.add(panel);
								center.setActiveTab(panel);
							}
						}
					}
				}
			}
		}));
		tree.doLayout();

	}
}
var model = Ext.define("TreeModel", { // 定义树节点数据模型
	extend : "Ext.data.Model",
	fields : [{
				name : "channelid",
				type : "string"
			}, {
				name : "text",
				type : "string"
			}, {
				name : "iconCls",
				type : "string"
			}, {
				name : "leaf",
				type : "boolean"
			}, {
				name : 'type'
			}, {
				name : 'component'
			}]
});
var createStore = function(id) { // 创建树面板数据源
	var me = this;
	return Ext.create("Ext.data.TreeStore", {
				defaultRootId : id, // 默认的根节点id
				model : model,
				proxy : {
					actionMethods : {
						read : 'post'// 没有会405错误
					},
					type : "ajax", // 获取方式
					url : "column/columnlist.do" // 获取树节点的地址

				},
				reader : {
					type : 'json',
					root : 'columnlist'
				},
				clearOnLoad : true,
				nodeParam : "parentID",// 设置传递给后台的参数名,值是树节点的id属性
				listeners : {
					'beforeexpand' : function(node,eOpts){  
              // 点击父亲节点的菜单会将节点的id通过ajax请求，将到后台 ,弄了一天,对js的原理还是不太懂
                this.proxy.extraParams.parentID = node.raw.channelid;  
            }  
          

					
// 'beforeload' : function(store, op, options) {
// var params = {
// parentID : id
// // 父节点id
// // store.load({
// // params : {
// // parentID : id
// //
// // }
// // });
// };
// Ext.apply(store.proxy.extraParams, params);
// }
				}
			});
};


